import React, { ReactElement } from "react";
import { ITodo } from "../typings";
import { Card, Button, Space, Checkbox, Popconfirm, message } from "antd";
interface IProps {
  todo: ITodo;
  toggledTodo: (id: number) => void;
  removeTodo: (id: number) => void;
}

function cancel() {
  message.error("Click on No");
}
const TdItem: React.FC<IProps> = ({
  todo,
  toggledTodo,
  removeTodo,
}): ReactElement => {
  const { id, content, time, completed } = todo;
  return (
    <div className="td-item">
      <Card title={"名称：" + time}>
        <div>
          <span style={{ textDecoration: completed ? "line-through" : "none" }}>
            事件：{content}
          </span>
        </div>
        <Space>
          <Checkbox onChange={() => toggledTodo(id)} checked={completed}>
            {completed ? "待办" : "已办"}
          </Checkbox>
          <Popconfirm
            title="Are you sure to delete this task?"
            onConfirm={() => removeTodo(id)}
            onCancel={cancel}
            okText="Yes"
            cancelText="No"
          >
            <Button>刪除</Button>
          </Popconfirm>
        </Space>
      </Card>
    </div>
  );
};
export default TdItem;
